/*
# 自定义样式
# 流布局方向
    flex流布局存在两个方向 !important; 流方向（方向1） !important; 与相对方向（方向2）；
# 说明
    举例：当前为横向流，那么相对方向就是纵向；如果当前为纵向，那么相对方向就是横向
    两个方向：流方向=方向1；相反方向=方向2；
    方向1对齐：用 “justify-content” 控制
    方向2对齐：用 “alien-item” 控制
# 命名规则
    fx:开启流布局,默认为横向，此时 方向1=横向
    fx_row: 横向流布局，此时 方向1=横向
    fx_col: 纵向流布局，此时 方向1=纵向
    fx_110: 填充流中剩余空间
    fx_wrap: 自动换行
    fx_nowrap: 禁止换行
    fx_方向1
    fx_方向1_方向2
*/

/*开启流布局*/
.fx {
  display: flex !important;
}

/*内容展示不下时，不会自动收缩*/
.fx_shrink0 {
  flex-shrink: 0;
}

/*填充剩余空间*/
.fx_110 {
  flex: 1 1 0 !important;
}

/*横向排列流*/
.fx_row {
  display: flex !important;
  flex-direction: row !important;
}

/*纵向排列流*/
.fx_col {
  display: flex !important;
  flex-direction: column !important;
}

/*自动换行*/
.fx_wrap {
  display: flex !important;
  flex-wrap: wrap !important;
}

/*禁止换行*/
.fx_nowrap {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/*左对齐(横)、上对其（纵）*/
.fx_start {
  display: flex !important;
  justify-content: flex-start !important;
}

/*右对齐(横)、下对齐（纵）*/
.fx_end {
  display: flex !important;
  justify-content: flex-end !important;
}

/*中对齐（横+纵）*/
.fx_center {
  display: flex !important;
  justify-content: center !important;
}

/*两端贴边对齐，剩余距离平分。*/
.fx_between {
  display: flex !important;
  justify-content: space-between !important;
}

/*区域贴边两侧的间隔相等，其余平分*/
.fx_around {
  display: flex !important;
  justify-content: space-around !important;
}


.fx_start_start {
  display: flex !important;
  justify-content: start !important;
  align-items: start !important;
}

.fx_start_center {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
}

.fx_start_end {
  display: flex !important;
  justify-content: start !important;
  align-items: end !important;
}

.fx_center_start {
  display: flex !important;
  justify-content: center !important;
  align-items: start !important;
}

/*内容居中，居中对齐*/
.fx_center_center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fx_center_end {
  display: flex !important;
  justify-content: center !important;
  align-items: end !important;
}

.fx_end_start {
  display: flex !important;
  justify-content: end !important;
  align-items: start !important;
}

.fx_end_center {
  display: flex !important;
  justify-content: end !important;
  align-items: center !important;
}

.fx_end_end {
  display: flex !important;
  justify-content: end !important;
  align-items: end !important;
}

/*内容拉伸铺满*/
.fx_stretch_stretch {
  display: flex !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}

